{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Create retriever & perform clustering for approximate search</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Retrievers</h4>
            </div>
            <div class="box-body">
                <table class="table dataTables-dict">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Algorithm</th>
                    <th>Source filter</th>
                    <th>Arguments</th>
                    <th>Retriever queue</th>
                    <th>Created</th>
                    <th>Last built</th>
                </tr>
                </thead>
                <tbody>
                {% for r in retrievers %}
                    <tr>
                        <td>{{ r.name }} </td>
                        <td>{{ r.get_algorithm_display }}</td>
                        <td>{{ r.source_filters}}</td>
                        <td>{{ r.arguments }}</td>
                        <td>q_retriever_{{ r.pk }}</td>
                        <td>{{ r.created }}</td>
                        <td>{{ r.last_built }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form action="/create_retriever/" method="post">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Create new retriever Exact or approximate retrievers using LOPQ</h4>
                </div>
                <div class="box-body">
                        <div class="row">
                            <div class="col-lg-3 col-md-6">
                                <label for="name">name</label>
                                <input name="name" class="form-control" placeholder="name" required="required" type="text" >
                                <label for="retriever_type">Retriever type</label>
                                <select class="js-example-basic" id="retriever_type" name="retriever_type"  style="width:100%">
                                    <option value="L">LOPQ</option>
                                    <option value="E">Exact</option>
                                </select>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <label for="selected">All entries by a specific Indexer</label>
                                <select class="js-example-basic" id="selected" name="algorithm"  style="width:100%">
                                {% for v in algorithms %}
                                    <option value="{{ v }}">{{ v }}</option>
                                {% endfor %}
                                </select>
                                <h4 class="text-center">OR</h4>
                                <label for="source_filters">Specify source filter as JSON (IndexEntries.objects.filters(**kwargs))</label>
                                <textarea name="source_filters" id="script" style="display:none" ></textarea>
                                <div id="editor" style="width:95%;margin:auto;height:200px" ></div>
                            </div>
                            <div class="col-lg-1 col-md-2 col-sm-3">
                                <label for="components">PCA components</label>
                                <input name="components" class="form-control" value="128" required="required" type="number" >
                            </div>
                            <div class="col-lg-1 col-md-2 col-sm-3">
                                <label for="m">M</label>
                                <input name="m" class="form-control" value="16" required="required" type="number" >
                            </div>
                            <div class="col-lg-1 col-md-2 col-sm-3">
                                <label for="v">V</label>
                                <input name="v" class="form-control" value="16" required="required" type="number" >
                            </div>
                            <div class="col-lg-1 col-md-2 col-sm-3">
                                <label for="sub">Subq</label>
                                <input name="sub" class="form-control" value="256" required="required" type="number" >
                            </div>
                        </div>
                </div>
                <div class="box-footer text-center">
                    {% csrf_token %}<button name="submit" class="btn btn-primary">Create new retriever</button>
                </div>
            </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
            var indexer_selector = $("#selected");
            indexer_selector.select2({theme: "bootstrap"});
            var retriever_type = $("#retriever_type");
            retriever_type.select2({theme: "bootstrap"});
            var excluded_index_entries = $("#excluded_index_entries");
            excluded_index_entries.select2({theme: "bootstrap"});
            InitializeTables();
            var scripttext = document.getElementById("script");
            scripttext.textContent = "";
            var editor = ace.edit("editor",{
                wrapBehavioursEnabled:true,
                autoScrollEditorIntoView:true});
            editor.setTheme("ace/theme/chrome");
            editor.getSession().setMode("ace/mode/json");
            var textarea = $('textarea[name="source_filters"]').hide();
            editor.getSession().setValue(textarea.val());
            editor.getSession().on('change', function(){
              textarea.val(editor.getSession().getValue());
            });

    })
</script>
{% endblock %}
